<template>
	<view>
		<view class="head_con" style="" @click="toback">
			<u-icon name="arrow-left" color="#fff" label="我的房屋" labelColor="#fff" space="6">
			</u-icon>
		</view>
		<view>
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view class="house_list" v-for="(item,index) in houselist" :key="index" @click="todetail(item.id)">
				<image class="house_img" :src="item.images_[0]" mode="aspectFill"></image>
				<view class="house_right_con">
					<view class="overflow">{{item.rent_type_label}} | {{item.title}}</view>
					<view class="second_con">
						{{item.area}}㎡ · {{item.arrow_type_label}} · {{item.address}}
					</view>
					<view class="house_label">
						<text>{{item.rent_type_label}}</text>
						<text>{{item.renovation_type_label}}</text>
						<text>{{item.arrow_type_label}}</text>
					</view>
					<view class="house_price">
						<text style="font-size: 32rpx;font-weight: bold;">{{item.price}}</text>元/月
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyRent
	} from "@/service/rentService.js";
	export default {
		data () {
			return {
				showEmpty:false,
				houselist:[]
			}
		},
		mounted() {
			getMyRent().then(this.getMyRent)
		},
		methods:{
			getMyRent(e){
				if(e.code==200){
					this.houselist=e.result;
					this.showEmpty=false
				}else{
					this.houselist=[];
					this.showEmpty=true
				}
			},
			toback(){
				uni.navigateBack()
			},
			todetail(id){
				this.$u.route({
					url: '/pagesHome/houseRent/houseDetail',
					params: {
						id:id
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.head_con{
		padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;
		background-image: linear-gradient(to right, #00828a, #4aa6ac);
	}
	.house_list{
		padding:20rpx;
		display: flex;
		border-top:1rpx solid #ddd;
		.house_img{
			width:30%;
			height:190rpx;
			margin-right:20rpx;
			border-radius: 15rpx;
		}
		.house_right_con{
			position: relative;
			width:67%;
			.second_con{
				margin:10rpx 0;
				font-size: 22rpx;
			}
			.house_label text{
				font-size: 22rpx;
				color:#666;
				padding:3rpx 8rpx;
				border:1rpx solid #999;
				border-radius: 8rpx;
				margin-right:10rpx;
			}
			.house_label text:first-child{
				color:#fff;
				background-image: linear-gradient(to right,#5baeb4,#07858d);
				border:1rpx solid transparent;
			}
			.house_price{
				position: absolute;
				bottom:0;
				color:red;
				font-size: 24rpx;
			}
		}
	}
</style>